<!-- 编辑角色 -->

<template>
  <div class="main-context">
    <t-form style="width:600px" :rules="rules" ref="form" :data="formData" :disabled="isLook" @submit="onSubmit">
      <t-form-item label="角色名称" name="name">
        <t-input v-model="formData.name" placeholder="请输入角色名称" />
      </t-form-item>
      <t-form-item label="描述" name="desc">
        <t-input v-model="formData.desc" placeholder="请输入内容" />
      </t-form-item>
      <t-form-item label="角色权限" name="permission" class="role-item">
        <div>
          <checkGroup
            :style="{marginTop: index > 0 ? '15px' : '6px'}"
            v-for="(item,index) in permissions"
            :key="item.label"
            :item="item"
            :default-value="permissionSelected[index]"
            @selected="permissionSelected[index] = $event">
          </checkGroup>
        </div>
      </t-form-item>
      <t-form-item>
        <t-button theme="primary" type="submit" :disabled="disabled">确定</t-button>
      </t-form-item>
    </t-form>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getPermissions, roleAdd, getRoleInfo, roleUpdate } from '@/api/role'
import checkGroup from './checkGroup.vue'

import { DialogPlugin } from 'tdesign-vue-next'
// 编辑时，根据id获取角色信息
const route = useRoute()
const { id, isLook } = route.query
const router = useRouter()
/**
 * 复选框组需要的格式
 * [{
 *   group: '分类名称',
 *   children: [{
 *     label: '权限1', value: '权限1',
 *     ...
 *   }]
 * }]
 */
const permissionSelected = ref([])
const permissions = ref([])
// 获取权限数据
getPermissions().then(res => {
  res.data.forEach((item, index) => {
    permissions.value[index] = {}
    permissions.value[index].children = []
    permissions.value[index].group = item.group
    item.permissions.forEach(item2 => {
      permissions.value[index].children.push({ label: item2, value: item2 })
    })
  })
  doEdit()
})
// 表单数据
const formData = ref({
  name: '',
  desc: ''
})
const rules = {
  name: [{ required: true }]
}

const disabled = ref(false)
// 表单提交
function onSubmit ({ validateResult }) {
  console.log(validateResult, formData.value, permissionSelected.value.flat())
  if (validateResult === true) {
    disabled.value = true
    const send = id ? roleUpdate : roleAdd
    send({
      ...formData.value,
      permissions: permissionSelected.value.flat()
    }).then(res => {
      const tip = DialogPlugin({
        theme: 'success',
        header: '操作成功',
        body: '是否返回列表页面',
        confirmBtn: '返回',
        onConfirm () {
          tip.hide()
          router.back()
        },
        onClose () {
          tip.hide()
        }
      })
    }).finally(() => {
      disabled.value = false
    })
  }
}

function doEdit () {
  if (id) {
    getRoleInfo({ id }).then(res => {
      formData.value = res.data
      permissions.value.forEach((item, index) => {
        permissionSelected.value[index] = item.children.reduce((arr, item2) => {
          if (res.data.permissions.includes(item2.label)) arr.push(item2.label)
          return arr
        }, [])
      })
      console.log(permissionSelected.value)
    })
  }
}
</script>
<style scoped>
/* .role-item >>> .t-form__controls-content {
  flex-direction: column;
} */
</style>
